package HTML5_2024_5_29;

public class M3_2 {
    // 前端后端
    /**
     * 前端: 用户页面和用户交互
     * 后端: 服务端的业务逻辑 对前端的数据支持
     */
    // CSS
    /**
     * Cascading(株连,继承,级联) Style Sheet(表)
     * Cascading: 父级元素可以继承给子级元素 外层层级修改的内容能应用在内层层级的字段中
     * 元素: 元素的位置 大小 风格 层级等都是可以进行修改的
     */
    // CSS的三种位置
    /**
     * 关键字: style
     * 1.CSS行内样式
     *   加在当前行元素上 并且只对当前行元素生效
     *   应用较少 使用方式繁琐冗余
     * 例如: <h4 style="color: deeppink;background-color: blueviolet">H4标题</h4>
     *      其中 1.利用在元素标签中添加 style="" 属性 对元素进行样式调整
     *          2.style=""中的定义样式的格式为 定义名称 : 定义具体样式
     *          3.不同设置内容之间用';'隔开即可
     * 2.CSS内部样式
     *   在.html文件的<head></head>标签中添加<style></style>标签 在该标签中对当前页面所有被选中的元素进行样式调整
     *   选中格式: 目标元素名 / . + class属性值 / # + id属性值 + {} 在{}中对其进行整体设置
     * 例如: <style>
     *         h4 {
     *             background-color: bisque; - 背景颜色设置
     *             color: blue; - 字体颜色设置
     *         }
     *      </style>
     *      此例表示: 将本.html文件中所有被<h4></h4>标签修饰的元素进行调整 调整时,依旧遵循 调整名称 : 调整内容 的编写格式
     *      注意: 其中每行代码后都应以';'结尾 此写法为规范写法
     * 3.CSS外部样式
     *   利用外部.css文件 将外部.css中的样式代码引入目标.html文件进行样式调整
     *   关键字:
     *    <link>标签: 链入外部文件标签
     *    rel=""属性: 必写属性 用于表示链入外部文件的类型
     *    href=""属性: 链入外部文件的路径
     * 例如: 在 a.html 文件外部创建 b.css 文件 在 b.css文件中进行样式调整
     *      div {
     *           width: 100px;
     *           height: 100px;
     *           border: 5px solid red; - 边框样式[单实线边框: solid 双实线边框: double]
     *      }
     *      写法与内部相似 此处表示将目标.html文件的所有被<div></div>标签修饰的元素进行样式调整 调整代码书写格式同上
     */
    // CSS作用范围
    /**
     * 行内样式是最小的
     * 外部样式是最大的
     */
    // CSS元素选择器优先级
    /**
     * 元素选择器优先级:
     *   1.行内样式:
     *     优先级最高
     *   2.内部样式和外部样式优先级:
     *     遵循谁后设置谁生效的规律 即在使用内部样式和外部样式一同规定了相同样式时 后规定的样式会将先前的样式规定覆盖掉
     * 强行提高优先级:
     *   1.临时提高 在网页控制台中点击某行HTML代码内容 点击`Style`显示详细样式内容 其中未生效的样式会被删除线修饰
     *            生效样式默认被勾选 取消已勾选生效的样式配置可进行临时更换页面样式显示优先级作用 但是会随着刷新页面恢复原有样式配置
     *   2.!important 单值缀值 跟在指定属性后 指定属性的';'前 强行提高优先级至最高级
     *                但是不建议使用 会破坏原有的CSS代码逻辑
     */
    // 常用值
    /**
     * px 像素 屏幕最小发光点
     *
     * 颜色
     * RGB: red green blue
     * 用8位2进制的字符分别存储 红 绿 蓝 这三种颜色
     * 一位二进制最大值 11111111 -> 256个字符(0~255)
     * 二进制表示法:
     * 其中: red   rgb(255,0,0)
     *      green rgb(0,255,0)
     *      blue  rgb(0,0,255)
     * 十六进制表示法(不区分大小写):
     * 其中: color #0000ff 表示蓝色 -> #00f
     *            #ff0000 表示红色 -> #f00
     *            #00ff00 表示绿色 -> #0f0
     *
     * RGBA表示法:1完全不透明 0完全透明
     */
    // 盒子模型
    /**
     * 辅助工具
     * 分为四层
     *  1.内容区域 元素本身的大小
     *  2.内间距 元素内子元素之间的距离
     *  3.元素的边框
     *  4.外间距
     */
}
